
import React, { useState } from 'react';
import { Table, Pagination, Button } from 'antd';


function StudentInforsList({ 
  studentsInfor,
  studentMessage,
  deleteStudent,
}) {

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    render: (text, record, index) => {
      return text;
    },
  },
  {
    title: '姓名',
    align: 'center',
    dataIndex: 'fd_name',
  },
  {
    title: '学号',
    align: 'center',
    dataIndex: 'fd_idNum',
  },
  {
    title: '专业',
    align: 'center',
    dataIndex: 'fd_professionalName',
  },
  {
    title: '班级',
    align: 'center',
    dataIndex: 'fd_claName',
  },
  {
    title: '手机号',
    align: 'center',
    dataIndex: 'fd_phone',
  },
  {
    title: '身份证',
    align: 'center',
    dataIndex: 'fd_idCard',
  },
  {
    title: '住址',
    align: 'center',
    dataIndex: 'fd_address',
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'operation',
    render: (_,record) => {
      return (
        <>
          <Button onClick={()=>{studentMessage(record)}} size='small' >详情</Button>
          <Button onClick={()=>{deleteStudent(record)}} size='small' >删除</Button>
        </>
      )
    }
  }
];

  const [page, setPage] = useState(1);
  const pageSize = 11;
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const paginatedData = studentsInfor?.slice(start, end).map((item, index) => {
    return {...item,index:index +1 +start}
  })

  const onPageChange = (page, pageSize) => {
    setPage(page);
  };

  return (
    <>
      <Table
        bordered
        columns={columns}
        dataSource={paginatedData}
        pagination={false}
        size="small"
        rowKey={"index"}
        scroll={{ x: 'max-content' }}
        style={{ fontSize: "12px" }}
      />
      <Pagination
        size='small'
        current={page}
        pageSize={pageSize}
        total={studentsInfor?.length}
        onChange={onPageChange}
        showSizeChanger={false}
        style={{ marginTop: '16px', textAlign: "right" }}
      />
    </>
  );
}

export default StudentInforsList;
